<html>
<head>

<link rel="stylesheet" href="js/main/dijit/themes/claro/claro.css"/>
<style type="text/css">
    @import "js/main/dojox/highlight/resources/highlight.css";

    body {
        background-image: url("http://stat16.privet.ru/lr/090b2dbcbb79d27b82e033f658201535");
        background-repeat: repeat;
    }

    .report_sql_field {
        font-size: small;
        background-color: #cccccc;
    }

    .report_hover {
        background-color: #84AFF4;
        cursor: pointer;
    }

    .report_nohover {
        background-color: #6d84a2;
        cursor: pointer;
    }

    .report_selected {
        background-color: #a0a000;
        cursor: pointer;
    }

    .row_header {
        background-color: #a0a000;
    }

    .row1 {
        background-color: #84AFF4;
    }

    .row2 {
        background-color: #6d84a2;
    }

    .main_table {
        background-color: #3770D6;
    }

    td {
        background-color: #ffffff;
    }
</style>
<script type="text/javascript " src="js/main/dojo/dojo.js"></script>


<script type="text/javascript">
    /**
     * Говно не пройдёт ^_^
     */
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("msie") != -1) {
        document.write("<div width='100%' style='margin-top:200px;' align='center'><img src='http://ms.ivi.lv/wp-content/uploads/2011/01/ie_sucks.png'></div>");
    }


    dojo.require("dojo.rpc.RpcService");
    dojo.require("dojo.rpc.JsonService");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.NumberTextBox");
    dojo.require("dijit.form.TextBox");
    dojo.require("dojox.highlight");
    dojo.require("dojox.highlight.languages.sql");
    dojo.require("dijit.Dialog");
    dojo.require("dojo.parser");

    var service = new dojo.rpc.JsonService("smd/so.action");

    dojo.ready(function() {
        dojo.byId("mainTable").style.display = "";
        showReportList();
    });

    function showError(msg) {
        new dijit.Dialog({
            title: "Error",
            content: msg.message,
            style:"width:300px; background-color:red;"
        }).show();
    }

    function showReport(report, params) {
        var parent = dojo.byId("reportResult");
        parent.innerHTML = "";
        var table = dojo.create("table", {width:"100%"}, parent);

        var showHeader = function(row) {
            var tr = dojo.create("tr", {}, table);
            dojo.forEach(row, function(col) {
                dojo.create("td", {innerHTML:col.label, className:"row_header"}, tr);
            });
        };


        var result = service.runReport(report.name, params);
        result.addCallback(dojo.hitch(this, function(result) {
            showHeader(result[0]);
            dojo.forEach(result, function(row, i) {
                var tr = dojo.create("tr", {}, table);
                dojo.forEach(row, function(col) {
                    dojo.create("td", {innerHTML:col.value,className:i % 2 == 0 ? "row1" : "row2"}, tr);
                });
            });
        }));
        result.addErrback(dojo.hitch(this, function(error) {
            showError(error);
        }));
    }

    function prepareReport(report) {
        if (report) {
            var parent = dojo.byId("reportParams");
            dojo.byId("reportResult").innerHTML = "";
            parent.innerHTML = report.label + ":<br><hr>";
            var table = dojo.create("table", {width:"100%"}, parent);
            var params = [];
            dojo.forEach(report.parameters, function(param) {
                var tr = dojo.create("tr", {}, table);
                dojo.create("span", {innerHTML:param.label}, dojo.create("td", {width:"10%",nowrap:"nowrap"}, tr));
                var td = dojo.create("td", {}, tr);
                var paramValue;
                var defaultValue = param.defaultValue ? param.defaultValue : "";
                switch (param.type) {
                    case "datetime":
                    case "date":
                        paramValue = new dijit.form.DateTextBox({
                            value: (defaultValue ? new Date(parseInt(defaultValue)) : new Date()),
                            constraints: { datePattern : param.format },
                            name: param.name,
                            getValue:function() {
                                return this.value.getTime();
                            }
                        }, dojo.create("div", {}, td));
                        break;
                    case "number":
                    case "integer":
                    case "int":
                    case "long":
                        paramValue = new dijit.form.NumberTextBox({
                            value: defaultValue,
                            name: param.name
                        }, dojo.create("div", {}, td));
                        break;

                    case "double":
                    case "float":
                        paramValue = new dijit.form.NumberTextBox({
                            value: defaultValue,
                            name: param.name
                        }, dojo.create("div", {}, td));
                        break;

                    default :
                        paramValue = new dijit.form.TextBox({
                            value: defaultValue,
                            name: param.name
                        }, dojo.create("div", {}, td));
                }
                params.push(paramValue);
            });

            dojo.create("input", {type:"button",value:"Run!",
                onclick:function() {
                    var ret = [];
                    dojo.forEach(params, function(p) {
                        ret.push({name:p.name, value:p.getValue()});
                    });
                    showReport(report, ret);
                }
            }, parent);
        }
    }

    function showReportList() {
        var reportNoHover = function() {
            if (this.className != "report_selected") {
                this.className = "report_nohover";
            }
        };
        var reportHover = function() {
            if (this.className != "report_selected") {
                this.className = "report_hover";
            }
        };
        var parent = dojo.byId("reportList");
        var result = service.getReports();
        result.addCallback(function() {
            parent.innerHTML = "";
            if (result.results && result.results[0]) {
                dojo.forEach(result.results[0], function(report) {
                    var td = dojo.create("td", {className:"report_nohover",
                        onmouseover:reportHover,
                        onmouseout:reportNoHover,
                        onclick:function() {
                            var old = dojo.query(".report_selected")[0];
                            if (old) old.className = "report_nohover";
                            td.className = "report_selected";
                            prepareReport(report);
                        }
                    }, dojo.create("tr", {}, parent));
                    td.innerHTML = report.label ? report.label : report.name;
                    dojo.create("div", {className:"report_sql_field",
                        innerHTML: dojox.highlight.processString(report.sql).result}, td);

                });
            }
        });
        result.addErrback(dojo.hitch(this, function(error) {
            showError(error);
        }));
    }
</script>
<body class="claro">
<table id="mainTable" width="80%" class="main_table" cellpadding="0" cellspacing="1" style="display: none;">
    <tr>
        <td colspan="2">
            <img style="margin:20px;" src="http://www.hip-hop.ru/forumavatars/avatar201646_3.gif">
        </td>
    </tr>
    <tr>
        <td width="200" valign="top">
            <table width="100%">
                <tbody id="reportList">

                </tbody>
            </table>
        </td>
        <td valign="top">
            <table width="100%">
                <tr>
                    <td valign="top" id="reportParams">

                    </td>
                </tr>
                <tr>
                    <td valign="top" id="reportResult">

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>
